<template>
  <view class="ticket-choose-date-container">
    <view
        v-for="(item,index) in dateList"
        :key="index"
        :class="['date-item',item.date === props.chooseDate ? 'active-date-item' : '']"
    >
      <view>{{item.title}}</view>
      <view>{{item.label}}</view>
    </view>
    <view class="more-date flex flex-center flex-1" @click="open">
      <view class="left-container">
        <view>更多</view>
        <view>日期</view>
      </view>
      <wd-icon name="arrow-right" size="18px" color="#181818"></wd-icon>
    </view>
  </view>
</template>

<script setup>
  import {ref} from "vue";
  import dayjs from "dayjs";
  const props = defineProps({
    defaultDate:{
      default: dayjs().format("YYYY-MM-DD"),
      type:String
    },
    dateListNumber:{
      default: 4,
      type:Number
    },
    chooseDate:{
      default: dayjs().format("YYYY-MM-DD"),
      type:String
    }
  });

  const dateList = ref([]);

  const generateDateArray = (startDate, count) =>  {
    const dateArray = [];
    const weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    const today = new Date(); // 当前日期
    const todayStr = today.toISOString().split("T")[0]; // 格式化 YYYY-MM-DD

    for (let i = 0; i < count; i++) {
      const dateObj = new Date(startDate);
      dateObj.setDate(dateObj.getDate() + i); // 计算每一天

      const year = dateObj.getFullYear();
      const month = dateObj.getMonth() + 1; // 月份从 0 开始
      const day = dateObj.getDate();
      const weekDay = weekDays[dateObj.getDay()];
      const dateStr = `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`;

      // 计算 title
      let title = weekDay;
      if (dateStr === todayStr) {
        title = "今天";
      } else {
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1);
        if (dateStr === tomorrow.toISOString().split("T")[0]) {
          title = "明天";
        } else {
          const afterTomorrow = new Date(today);
          afterTomorrow.setDate(today.getDate() + 2);
          if (dateStr === afterTomorrow.toISOString().split("T")[0]) {
            title = "后天";
          }
        }
      }

      // 组装对象
      dateArray.push({
        label: `${month}月${day}日`,
        date: dateStr,
        title: title,
      });
    }
    dateList.value = dateArray;
  }



  watch(() => props.defaultDate,(value) => {
    generateDateArray(props.defaultDate,props.dateListNumber);
  },{immediate:true});
</script>

<style lang="scss" scoped>
  .ticket-choose-date-container {
    display: flex;
    justify-content: space-between;
    .date-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 166rpx;
      width: 20%;
      border-radius: 10.5rpx;
      font-size: 25rpx;
      margin-right: 14rpx;
      color: #181818;
      background: #EEF0DF;
      overflow: hidden;
    }
    .active-date-item {
      color: #FDFFEB;
      background: #1B9C61;
    }
    .more-date{
      font-size: 25rpx;
    }
  }
</style>
